<template>
    <div class="panel">
        <div class="notify-menu-box" v-if="showPanel()">
            <div class="notify-menu-item" :title="'跳转通知页'" v-if="shopConfig.state.notify">
                <el-badge size="small" is-dot :value="shopConfig.state.unreadCount" :hidden="shopConfig.state.unreadCount <= 0">
                    <Icon name="el-icon-ChatDotSquare" @click="toNotifyList"></Icon>
                </el-badge>
            </div>
            <div class="notify-menu-item" :title="'通知提示音'" v-if="shopConfig.state.notify">
                <Icon :name="shopConfig.state.playAudio ? 'el-icon-Microphone' : 'el-icon-Mute'" @click="shopConfig.changePlayAudio"></Icon>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { isAdminApp } from '/@/utils/common'
import { adminBaseRoutePath } from '/@/router/static/adminBase'
import { routePush } from '/@/utils/router'
import { useRoute } from 'vue-router'
import { useShopConfig } from '/@/stores/shop/shopConfig'

const shopConfig = useShopConfig()

const showPanel = () => {
    const route = useRoute()

    if (isAdminApp() && route.path !== '/' && route.fullPath !== adminBaseRoutePath + '/login') {
        return true
    }

    return false
}
const toNotifyList = () => {
    routePush(`${adminBaseRoutePath}/shop/notify/notify?status=0`)
}
</script>

<style lang="scss" scoped>
.notify-menu-box {
    width: 35px;
    position: fixed;
    right: 0;
    bottom: 10px;
    display: flex;
    gap: 5px;
    background-color: #fff;
    box-shadow: 0 0 4px #ccc;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    z-index: 99999;
}

.notify-menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    background-color: #fff;
    box-shadow: none;
    cursor: pointer;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    -webkit-touch-callout: none;

    &:last-child {
        padding-bottom: 5px;
    }
}

.button-style {
    text-decoration: none;
    color: inherit;
}

.icon-style {
    font-size: 20px;
    color: #333;
}

:deep(.el-badge__content.is-fixed.is-dot) {
    width: 11px;
    height: 11px;
    border-radius: 100%;
}
</style>
